<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="format-detection" content="telephone=no">
<meta http-equiv="Cache-Control" content="no-siteapp">
<link rel="stylesheet" href="../../../static/layui/css/layui.css" media="all" />
<link rel="stylesheet" href="../../../static/css/public.css" media="all" />
</head>
<body class="childrenBody">
	<form class="layui-form" lay-filter="formTest" id="form" style="width: 80%;">
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">类型</label>
			<div class="layui-input-block">
				<select name="type" id="type" lay-filter="type" value="1" lay-verify="required">
					<option value="1">显示菜单</option>
					<option value="2">功能菜单</option>
					<option value="3">功能按钮</option>
				</select>
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">权限编码</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="code" lay-verify="required|number" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">名字</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="name" lay-verify="required" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12" id="div-url" style="display: none;">
			<label class="layui-form-label">url</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="url" id="input-url" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12" id="div-icon">
			<label class="layui-form-label">icon</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="icon" lay-verify="required" lay-filter="input-icon" id="input-icon" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">sort</label>
			<div class="layui-input-block">
				<input type="text" class="layui-input" name="sort" lay-verify="required|number" placeholder="">
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<label class="layui-form-label">备注</label>
			<div class="layui-input-block">
				<textarea placeholder="" class="layui-textarea" name="remarks"></textarea>
			</div>
		</div>
		<div class="layui-form-item layui-row layui-col-xs12">
			<div class="layui-input-block">
				<button type="button" class="layui-btn layui-btn-sm" lay-submit="" lay-filter="submit">提交</button>
				<button type="button" class="layui-btn layui-btn-sm layui-btn-primary close-btn">取消</button>
			</div>
		</div>
	</form>
	<script type="text/javascript" src="../../../static/js/jquery-2.1.1.min.js"></script>
	<script type="text/javascript" src="../../../static/layui/layui.js"></script>
	<script type="text/javascript" src="../../../static/custom/js/common.js"></script>
	<script type="text/javascript">
		layui.config({
			base : '../../../static/plugin/iconPicker'
		}).extend({
			iconPicker : '/iconPicker'
		});

		layui.use([ 'form', 'layer', 'iconPicker' ], function() {
			var $ = layui.jquery;
			var form = layui.form;
			var layer = layui.layer;
			var iconPicker = layui.iconPicker;
			var toUpdateApi = "../../../system/permission/toUpdate";
			var insertHtml = "../../../system/permission/insert";
			var updateHtml = "../../../system/permission/update";
			var insertMethod = "post";
			var updateMethod = "put";
			var url = insertHtml;
			var method = insertMethod;
			iconPicker.render({
				// 选择器，推荐使用input
				elem : '#input-icon',
				// 数据类型：fontClass/unicode，推荐使用fontClass
				type : 'fontClass',
				// 是否开启搜索：true/false
				search : true,
				// 是否开启分页
				page : true,
				// 每页显示数量，默认12
				limit : 12,
				// 点击回调
				click : function(data) {
					$('#input-icon').val(data.icon);
				},
				// 渲染成功后的回调
				success : function(d) {

				}
			});
			var id = getUrlParam("id");
			if (id) {
				//更新
				$("#form").append("<input type='hidden' name='pid' value='' >");
				$("#form").append("<input type='hidden' name='level' value='' >");
				$("#form").append("<input type='hidden' name='id' value='' >");
				method = updateMethod;
				url = updateHtml;
				loadAjax( toUpdateApi + "/" + id, "get", null, function(response) {
					baseCallBack(response, function(response) {
						initSelect(response.data.type);
						$("#type").attr("disabled", "true");
						form.render('select');
						fomrVal(form, "formTest", response.data);
						iconPicker.checkIcon("input-icon", response.data.icon);
					});
				});
			} else {
				//新增
				var pid = getUrlParam("pid");
				if (!pid) {
					$("#form").append("<input type='hidden' name='level' value='1' >");
				} else {
					var level = getUrlParam("level");
					$("#form").append("<input type='hidden' name='pid' value='" + pid + "' >");
					$("#form").append("<input type='hidden' name='level' value='" + (parseInt(level) + 1) + "' >");
				}

			}

			//控制隐藏
			function initSelect(value) {
				if (value == "1") {
					$("#div-url").hide();
					$("#input-url").attr("lay-verify", "");
					$("#input-url").val("");
					$("#div-icon").show();
					$("#input-icon").attr("lay-verify", "required");
				} else if (value == "2") {
					$("#div-url").show();
					$("#input-url").attr("lay-verify", "required");
					$("#div-icon").show();
					$("#input-icon").attr("lay-verify", "required");
				} else if (value == "3") {
					$("#div-url").show();
					$("#input-url").attr("lay-verify", "required");
					$("#div-icon").hide();
					$("#input-icon").val("");
					$("#input-icon").attr("lay-verify", "");
				}
			}
			//监听类型
			form.on('select(type)', function(data) {
				initSelect(data.value);
			});
			form.on("submit(submit)", function(data) {
				loadAjax( url, method, $("#form").serialize(), function(response) {
					baseCallBack(response, parentReloadCallBack);
				});
				return false;
			})
		})
	</script>
</body>
</html>